// Name:              Utility
//
// Description:       Useful classes
//
// Component:
//                    `.pull-cf`
//                    `.pull-f*`
//                    `.pull-vertical-align`
//                    `.pull-display-*`
//                    `.pull-visible-*`
//                    `.pull-hidden-*`
//
// =============================================================================


/* ==========================================================================
   Component: Utility
 ============================================================================ */

.#{$utility}scrollable-horizontal {
  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -webkit-overflow-scrolling: touch;
}

.#{$utility}scrollable-vertical {
  height: $utility-scrollable-height;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  resize: vertical;
}

/* img-max-width*/

.#{$utility}img-100 {
    width: 100%;
    height: 100%;
}
.#{$utility}img-full {
    width: 100vw;
    height: 100vh;
}
.#{$utility}width-100 {
    width: 100%;
}
.#{$utility}height-100 {
    height: 100%;
}

/* Border-radius*/

.#{$utility}square {
  border-radius: 0;
}

.#{$utility}radius {
  border-radius: $radius-normal;
}

.#{$utility}round {
  border-radius: $global-rounded;
}

.#{$utility}circle {
  border-radius: 50%;
}


/* Float blocks*/

.clearfix {
  @include clearfix;
}

.#{$utility}left {
  float: left;
}

.#{$utility}right {
  float: right;
}

.#{$utility}nbfc {
  overflow: hidden;
}


.#{$utility}center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* Display */

.#{$utility}block {
  display: block !important;
}

.#{$utility}inline {
  display: inline !important;
}

.#{$utility}inline-block {
  display: inline-block !important;
}

.#{$utility}hide {
  display: none !important;
  visibility: hidden !important;
}


// Vertical alignment
// =============================================================================

/*
* Remove whitespace between child elements when using `inline-block`
*/

.#{$utility}vertical-align {
  font-size: 0.001px;
}

/*
* The `#{$utility}vertical-align` container needs a specific height
*/

.#{$utility}vertical-align:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

/*
* Sub-object which can have any height
* 1. Reset whitespace hack
*/

.#{$utility}vertical-align-middle,
.#{$utility}vertical-align-bottom {
  display: inline-block;
  font-size: $global-font-size; /* 1 */
  max-width: 100%;
}

.#{$utility}vertical-align-middle {
  vertical-align: middle;
}

.#{$utility}vertical-align-bottom {
  vertical-align: bottom;
}


// Responsive width
// =============================================================================

.#{$utility}responsive-width {
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
}


// =============================================================================
// Margin & Padding
// =============================================================================

// margin mixin

@mixin spacing-variant($type, $dimension) {
  .#{$utility}#{$type}#{$dimension} {
    #{$type}#{$dimension}: $global-margin;
  }

  .#{$utility}#{$type}#{$dimension}-0 {
    #{$type}#{$dimension}: 0!important;
  }

  .#{$utility}#{$type}#{$dimension}-xs {
    #{$type}#{$dimension}: $global-margin-xs;
  }

  .#{$utility}#{$type}#{$dimension}-sm {
    #{$type}#{$dimension}: $global-margin-sm;
  }

  .#{$utility}#{$type}#{$dimension}-lg {
    #{$type}#{$dimension}: $global-margin-lg;
  }

  .#{$utility}#{$type}#{$dimension}-xl {
    #{$type}#{$dimension}: $global-margin-xl;
  }
}

@mixin spacing-all-variant($type) {
  .#{$utility}#{$type} {
    #{$type}: $global-margin;
  }

  .#{$utility}#{$type}-0 {
    #{$type}: 0!important;
  }

  .#{$utility}#{$type}-xs {
    #{$type}: $global-margin-xs;
  }

  .#{$utility}#{$type}-sm {
    #{$type}: $global-margin-sm;
  }

  .#{$utility}#{$type}-lg {
    #{$type}: $global-margin-lg;
  }

  .#{$utility}#{$type}-xl {
    #{$type}: $global-margin-xl;
  }
}

@mixin spacing-hv-variant($type, $dimension, $dimension1, $dimension2) {
  .#{$utility}#{$type}#{$dimension} {
    #{$type}#{$dimension1}: $global-margin;
    #{$type}#{$dimension2}: $global-margin;
  }

  .#{$utility}#{$type}#{$dimension}-0 {
    #{$type}#{$dimension1}: 0!important;
    #{$type}#{$dimension2}: 0!important;
  }

  .#{$utility}#{$type}#{$dimension}-xs {
    #{$type}#{$dimension1}: $global-margin-xs;
    #{$type}#{$dimension2}: $global-margin-xs;
  }

  .#{$utility}#{$type}#{$dimension}-sm {
    #{$type}#{$dimension1}: $global-margin-sm;
    #{$type}#{$dimension2}: $global-margin-sm;
  }

  .#{$utility}#{$type}#{$dimension}-lg {
    #{$type}#{$dimension1}: $global-margin-lg;
    #{$type}#{$dimension2}: $global-margin-lg;
  }

  .#{$utility}#{$type}#{$dimension}-xl {
    #{$type}#{$dimension1}: $global-margin-xl;
    #{$type}#{$dimension2}: $global-margin-xl;
  }
}


/* Margin helpers */

@include spacing-all-variant(margin);
@include spacing-hv-variant(margin, -horizontal, -left, -right);
@include spacing-hv-variant(margin, -vertical, -top, -bottom);
@include spacing-variant(margin, -top);
@include spacing-variant(margin, -bottom);
@include spacing-variant(margin, -left);
@include spacing-variant(margin, -right);

/* Padding helpers */

@include spacing-all-variant(padding);
@include spacing-hv-variant(padding, -horizontal, -left, -right);
@include spacing-hv-variant(padding, -vertical, -top, -bottom);
@include spacing-variant(padding, -top);
@include spacing-variant(padding, -bottom);
@include spacing-variant(padding, -left);
@include spacing-variant(padding, -right);


// =============================================================================
// Foundation Visibility HTML Classes
// =============================================================================

/* small displays */

@media #{$screen} {
  .#{$utility}show-sm-only,
  .#{$utility}show-sm-up,
  .#{$utility}show-sm,
  .#{$utility}show-sm-down,
  .#{$utility}hide-md-only,
  .#{$utility}hide-md-up,
  .#{$utility}hide-md,
  .#{$utility}show-md-down,
  .#{$utility}hide-lg-only,
  .#{$utility}hide-lg-up,
  .#{$utility}hide-lg,
  .#{$utility}show-lg-down {
    display: inherit !important;
  }

  .#{$utility}hide-sm-only,
  .#{$utility}hide-sm-up,
  .#{$utility}hide-sm,
  .#{$utility}hide-sm-down,
  .#{$utility}show-md-only,
  .#{$utility}show-md-up,
  .#{$utility}show-md,
  .#{$utility}hide-md-down,
  .#{$utility}show-lg-only,
  .#{$utility}show-lg-up,
  .#{$utility}show-lg,
  .#{$utility}hide-lg-down {
    display: none !important;
  }

  /* table */
  table.#{$utility}show-sm-only,
  table.#{$utility}show-sm-up,
  table.#{$utility}show-sm,
  table.#{$utility}show-sm-down,
  table.#{$utility}hide-md-only,
  table.#{$utility}hide-md-up,
  table.#{$utility}hide-md,
  table.#{$utility}show-md-down,
  table.#{$utility}hide-lg-only,
  table.#{$utility}hide-lg-up,
  table.#{$utility}hide-lg,
  table.#{$utility}show-lg-down {
    display: table !important;
  }

  thead.#{$utility}show-sm-only,
  thead.#{$utility}show-sm-up,
  thead.#{$utility}show-sm,
  thead.#{$utility}show-sm-down,
  thead.#{$utility}hide-md-only,
  thead.#{$utility}hide-md-up,
  thead.#{$utility}hide-md,
  thead.#{$utility}show-md-down,
  thead.#{$utility}hide-lg-only,
  thead.#{$utility}hide-lg-up,
  thead.#{$utility}hide-lg,
  thead.#{$utility}show-lg-down {
    display: table-header-group !important; }

  tbody.#{$utility}show-sm-only,
  tbody.#{$utility}show-sm-up,
  tbody.#{$utility}show-sm,
  tbody.#{$utility}show-sm-down,
  tbody.#{$utility}hide-md-only,
  tbody.#{$utility}hide-md-up,
  tbody.#{$utility}hide-md,
  tbody.#{$utility}show-md-down,
  tbody.#{$utility}hide-lg-only,
  tbody.#{$utility}hide-lg-up,
  tbody.#{$utility}hide-lg,
  tbody.#{$utility}show-lg-down {
    display: table-row-group !important;
  }

  tr.#{$utility}show-sm-only,
  tr.#{$utility}show-sm-up,
  tr.#{$utility}show-sm,
  tr.#{$utility}show-sm-down,
  tr.#{$utility}hide-md-only,
  tr.#{$utility}hide-md-up,
  tr.#{$utility}hide-md,
  tr.#{$utility}show-md-down,
  tr.#{$utility}hide-lg-only,
  tr.#{$utility}hide-lg-up,
  tr.#{$utility}hide-lg,
  tr.#{$utility}show-lg-down {
    display: table-row !important;
  }

  th.#{$utility}show-sm-only,
  td.#{$utility}show-sm-only,
  th.#{$utility}show-sm-up,
  td.#{$utility}show-sm-up,
  th.#{$utility}show-sm,
  td.#{$utility}show-sm,
  th.#{$utility}show-sm-down,
  td.#{$utility}show-sm-down,
  th.#{$utility}hide-md-only,
  td.#{$utility}hide-md-only,
  th.#{$utility}hide-md-up,
  td.#{$utility}hide-md-up,
  th.#{$utility}hide-md,
  td.#{$utility}hide-md,
  th.#{$utility}show-md-down,
  td.#{$utility}show-md-down,
  th.#{$utility}hide-lg-only,
  td.#{$utility}hide-lg-only,
  th.#{$utility}hide-lg-up,
  td.#{$utility}hide-lg-up,
  th.#{$utility}hide-lg,
  td.#{$utility}hide-lg,
  th.#{$utility}show-lg-down,
  td.#{$utility}show-lg-down {
    display: table-cell !important;
  }
}

/* medium displays */
@media #{$medium-up} {
  .#{$utility}hide-sm-only,
  .#{$utility}show-sm-up,
  .#{$utility}hide-sm,
  .#{$utility}hide-sm-down,
  .#{$utility}show-md-only,
  .#{$utility}show-md-up,
  .#{$utility}show-md,
  .#{$utility}show-md-down,
  .#{$utility}hide-lg-only,
  .#{$utility}hide-lg-up,
  .#{$utility}hide-lg,
  .#{$utility}show-lg-down {
    display: inherit !important;
  }

  .#{$utility}show-sm-only,
  .#{$utility}hide-sm-up,
  .#{$utility}show-sm,
  .#{$utility}show-sm-down,
  .#{$utility}hide-md-only,
  .#{$utility}hide-md-up,
  .#{$utility}hide-md,
  .#{$utility}hide-md-down,
  .#{$utility}show-lg-only,
  .#{$utility}show-lg-up,
  .#{$utility}show-lg,
  .#{$utility}hide-lg-down {
    display: none !important;
  }

  table.#{$utility}hide-sm-only,
  table.#{$utility}show-sm-up,
  table.#{$utility}hide-sm,
  table.#{$utility}hide-sm-down,
  table.#{$utility}show-md-only,
  table.#{$utility}show-md-up,
  table.#{$utility}show-md,
  table.#{$utility}show-md-down,
  table.#{$utility}hide-lg-only,
  table.#{$utility}hide-lg-up,
  table.#{$utility}hide-lg,
  table.#{$utility}show-lg-down {
    display: table !important;
  }

  thead.#{$utility}hide-sm-only,
  thead.#{$utility}show-sm-up,
  thead.#{$utility}hide-sm,
  thead.#{$utility}hide-sm-down,
  thead.#{$utility}show-md-only,
  thead.#{$utility}show-md-up,
  thead.#{$utility}show-md,
  thead.#{$utility}show-md-down,
  thead.#{$utility}hide-lg-only,
  thead.#{$utility}hide-lg-up,
  thead.#{$utility}hide-lg,
  thead.#{$utility}show-lg-down {
    display: table-header-group !important;
  }

  tbody.#{$utility}hide-sm-only,
  tbody.#{$utility}show-sm-up,
  tbody.#{$utility}hide-sm,
  tbody.#{$utility}hide-sm-down,
  tbody.#{$utility}show-md-only,
  tbody.#{$utility}show-md-up,
  tbody.#{$utility}show-md,
  tbody.#{$utility}show-md-down,
  tbody.#{$utility}hide-lg-only,
  tbody.#{$utility}hide-lg-up,
  tbody.#{$utility}hide-lg,
  tbody.#{$utility}show-lg-down {
    display: table-row-group !important;
  }

  tr.#{$utility}hide-sm-only,
  tr.#{$utility}show-sm-up,
  tr.#{$utility}hide-sm,
  tr.#{$utility}hide-sm-down,
  tr.#{$utility}show-md-only,
  tr.#{$utility}show-md-up,
  tr.#{$utility}show-md,
  tr.#{$utility}show-md-down,
  tr.#{$utility}hide-lg-only,
  tr.#{$utility}hide-lg-up,
  tr.#{$utility}hide-lg,
  tr.#{$utility}show-lg-down {
    display: table-row !important;
  }

  th.#{$utility}hide-sm-only,
  td.#{$utility}hide-sm-only,
  th.#{$utility}show-sm-up,
  td.#{$utility}show-sm-up,
  th.#{$utility}hide-sm,
  td.#{$utility}hide-sm,
  th.#{$utility}hide-sm-down,
  td.#{$utility}hide-sm-down,
  th.#{$utility}show-md-only,
  td.#{$utility}show-md-only,
  th.#{$utility}show-md-up,
  td.#{$utility}show-md-up,
  th.#{$utility}show-md,
  td.#{$utility}show-md,
  th.#{$utility}show-md-down,
  td.#{$utility}show-md-down,
  th.#{$utility}hide-lg-only,
  td.#{$utility}hide-lg-only,
  th.#{$utility}hide-lg-up,
  td.#{$utility}hide-lg-up,
  th.#{$utility}hide-lg,
  td.#{$utility}hide-lg,
  th.#{$utility}show-lg-down,
  td.#{$utility}show-lg-down {
    display: table-cell !important;
  }
}

/* large displays */
@media #{$large-up} {
  .#{$utility}hide-sm-only,
  .#{$utility}show-sm-up,
  .#{$utility}hide-sm,
  .#{$utility}hide-sm-down,
  .#{$utility}hide-md-only,
  .#{$utility}show-md-up,
  .#{$utility}hide-md,
  .#{$utility}hide-md-down,
  .#{$utility}show-lg-only,
  .#{$utility}show-lg-up,
  .#{$utility}show-lg,
  .#{$utility}show-lg-down {
    display: inherit !important;
  }

  .#{$utility}show-sm-only,
  .#{$utility}hide-sm-up,
  .#{$utility}show-sm,
  .#{$utility}show-sm-down,
  .#{$utility}show-md-only,
  .#{$utility}hide-md-up,
  .#{$utility}show-md,
  .#{$utility}show-md-down,
  .#{$utility}hide-lg-only,
  .#{$utility}hide-lg-up,
  .#{$utility}hide-lg,
  .#{$utility}hide-lg-down {
    display: none !important;
  }

  table.#{$utility}hide-sm-only,
  table.#{$utility}show-sm-up,
  table.#{$utility}hide-sm,
  table.#{$utility}hide-sm-down,
  table.#{$utility}hide-md-only,
  table.#{$utility}show-md-up,
  table.#{$utility}hide-md,
  table.#{$utility}hide-md-down,
  table.#{$utility}show-lg-only,
  table.#{$utility}show-lg-up,
  table.#{$utility}show-lg,
  table.#{$utility}show-lg-down{
    display: table !important;
  }

  thead.#{$utility}hide-sm-only,
  thead.#{$utility}show-sm-up,
  thead.#{$utility}hide-sm,
  thead.#{$utility}hide-sm-down,
  thead.#{$utility}hide-md-only,
  thead.#{$utility}show-md-up,
  thead.#{$utility}hide-md,
  thead.#{$utility}hide-md-down,
  thead.#{$utility}show-lg-only,
  thead.#{$utility}show-lg-up,
  thead.#{$utility}show-lg,
  thead.#{$utility}show-lg-down {
    display: table-header-group !important;
  }

  tbody.#{$utility}hide-sm-only,
  tbody.#{$utility}show-sm-up,
  tbody.#{$utility}hide-sm,
  tbody.#{$utility}hide-sm-down,
  tbody.#{$utility}hide-md-only,
  tbody.#{$utility}show-md-up,
  tbody.#{$utility}hide-md,
  tbody.#{$utility}hide-md-down,
  tbody.#{$utility}show-lg-only,
  tbody.#{$utility}show-lg-up,
  tbody.#{$utility}show-lg,
  tbody.#{$utility}show-lg-down {
    display: table-row-group !important;
  }

  tr.#{$utility}hide-sm-only,
  tr.#{$utility}show-sm-up,
  tr.#{$utility}hide-sm,
  tr.#{$utility}hide-sm-down,
  tr.#{$utility}hide-md-only,
  tr.#{$utility}show-md-up,
  tr.#{$utility}hide-md,
  tr.#{$utility}hide-md-down,
  tr.#{$utility}show-lg-only,
  tr.#{$utility}show-lg-up,
  tr.#{$utility}show-lg,
  tr.#{$utility}show-lg-down {
    display: table-row !important;
  }

  th.#{$utility}hide-sm-only,
  td.#{$utility}hide-sm-only,
  th.#{$utility}show-sm-up,
  td.#{$utility}show-sm-up,
  th.#{$utility}hide-sm,
  td.#{$utility}hide-sm,
  th.#{$utility}hide-sm-down,
  td.#{$utility}hide-sm-down,
  th.#{$utility}hide-md-only,
  td.#{$utility}hide-md-only,
  th.#{$utility}show-md-up,
  td.#{$utility}show-md-up,
  th.#{$utility}hide-md,
  td.#{$utility}hide-md,
  th.#{$utility}hide-md-down,
  td.#{$utility}hide-md-down,
  th.#{$utility}show-lg-only,
  td.#{$utility}show-lg-only,
  th.#{$utility}show-lg-up,
  td.#{$utility}show-lg-up,
  th.#{$utility}show-lg,
  td.#{$utility}show-lg,
  th.#{$utility}show-lg-down,
  td.#{$utility}show-lg-down {
    display: table-cell !important;
  }
}

@media #{$landscape} {
  .#{$utility}show-landscape,
  .#{$utility}hide-portrait {
    display: inherit !important;
  }

  .#{$utility}hide-landscape,
  .#{$utility}show-portrait {
    display: none !important;
  }
}

@media #{$portrait} {
  .#{$utility}show-portrait,
  .#{$utility}hide-landscape {
    display: inherit !important;
  }

  .#{$utility}hide-portrait,
  .#{$utility}show-landscape {
    display: none !important;
  }
}


// =============================================================================
// Text Utility
// =============================================================================

// Font family
// -----------------------------------------------------------------------------

.#{$utility}sans-serif {
  font-family: $font-family-sans-serif;
}

.#{$utility}serif {
  font-family: $font-family-serif;
}

.#{$utility}kai {
  font-family: $font-family-kai;
}

.#{$utility}monospace {
  font-family: $font-family-monospace;
}


// Text color
// -----------------------------------------------------------------------------

.#{$utility}text-primary {
  color: $global-primary;
}

.#{$utility}text-secondary {
  color: $global-secondary;
}

.#{$utility}text-success {
  color: $global-success;
}

.#{$utility}text-warning {
  color: $global-warning;
}

.#{$utility}text-danger {
  color: $global-danger;
}

.#{$utility}link-muted {
  color: #666;
  a {
    color: #666;
  }

  &:hover,
  & a:hover {
    color: #555;
  }
}


// Text size
// -----------------------------------------------------------------------------

.#{$utility}text-default {
  font-size: $base-font-size;
}

/*
.#{$utility}text-xxs {
  font-size: $font-size-xxs;
}
*/

.#{$utility}text-xs {
  font-size: $font-size-xs;
}

.#{$utility}text-sm {
  font-size: $font-size-sm;
}

.#{$utility}text-lg {
  font-size: $font-size-lg;
}

.#{$utility}text-xl {
  font-size: $font-size-xl;
}

.#{$utility}text-xxl {
  font-size: $font-size-xxl;
}

.#{$utility}text-xxxl {
  font-size: $font-size-xxxl;
}


// Text overflow
// Requires inline-block or block for proper styling
// =============================================================================

.#{$utility}ellipsis,
.#{$utility}text-truncate {
  word-wrap: normal; /* for IE */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.#{$utility}text-break {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

.#{$utility}text-nowrap {
  white-space: nowrap;
}


[class*='#{$utility}align-'] {
  margin-bottom: 1rem;
}

.#{$utility}align-left {
  margin-right: 1rem;
  float: left;
}

.#{$utility}align-right {
  margin-left: 1rem;
  float: right;
}


/** Only display content to screen readers
 * See: http://a11yproject.com/posts/how-to-hide-content/
 */

.#{$utility}sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


/* Text Image Replacement */

.#{$utility}text-ir {
  @include text-hide();
}


/* Text align */

// Text align mixin
@mixin text-align-variant($point) {
  .#{$utility}#{$point}text-left {
    text-align: left !important;
  }

  .#{$utility}#{$point}text-right {
    text-align: right !important;
  }

  .#{$utility}#{$point}text-center {
    text-align: center !important;
  }

  .#{$utility}#{$point}text-justify {
    text-align: justify !important;
  }
}

@media #{$screen} {
  @include text-align-variant(unquote"");
}

@media #{$small-only} {
  @include text-align-variant(sm-only-);
}

@media #{$medium-only} {
  @include text-align-variant(md-only-);
}

@media #{$medium-up} {
  @include text-align-variant(md-);
}

@media #{$large-up} {
  @include text-align-variant(lg-);
}

.#{$utility}text-top {
  vertical-align: top !important;
}

.#{$utility}text-middle {
  vertical-align: middle !important;
}

.#{$utility}text-bottom {
  vertical-align: bottom !important;
}


// angle
// ========================================================================

.#{$utility}angle {
  position: absolute;
  @include angle-base();
}

.#{$utility}angle-up {
  top: 0;
  @include angle-up-variant();
}

.#{$utility}angle-down {
  @include angle-down-variant();
}

.#{$utility}angle-left {
  @include angle-left-variant();
}

.#{$utility}angle-right {
  @include angle-right-variant();
}


/* ==========================================================================
   Component: Image
 ============================================================================ */

/* Image thumbnails */

.img-thumbnail {
  display: inline-block;
  max-width: 100%;
  height: auto;
  padding: $img-thumbnail-padding;
  line-height: $line-height-base;
  background-color: $img-thumbnail-bg;
  border: 1px solid $img-thumbnail-bd-color;
  border-radius: $img-thumbnail-bd-radius;
  transition: all .2s ease-in-out;

  &.radius {
    border-radius: $radius-normal;
  }

  // @include hook-img-thumbnail();
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
  // @include hook-img-responsive();
}
